<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>父组件向子组件传值</title>
</head>

<body>
  <div id="app">
    <!-- 使用组件 -->
    <Father></Father>
  </div>
  <template id="father">
    <!-- 唯一根元素 -->
    <div>
      <h3>父组件</h3>
      <!-- 子组件以标签化的形式嵌套在父组件上 -->
      <!-- 可以在父组件中直接赋值的方式传递数据 不过数据被写死了 -->
      <!-- <Son son_money="2500"></Son> -->
      <!-- 传递数据给子组件，使用单向数据绑定的方式将父组件的数据绑定到子组件的自定义属性上 自定义属性注意命名规范，中间不能不能不能有间隔线-->
      <Son :son_money="money"></Son>
    </div>
  </template>
  <template id="son">
    <!-- 唯一根元素 -->
    <div>
      <h6>子组件</h6>
      <p>从父组件接收到的数据是：{{ son_money }}</p>
    </div>
  </template>
</body>

<script src="../vue.js"></script>
<script>
  // 父组件 定义数据
  Vue.component('Father', {
    // 父组件的模板
    template: '#father',
    // 除了跟组件 定义数据都使用函数形式
    data() {
      return {
        money: 2000
      }
    }
  })
  // 子组件 接收数据
  Vue.component('Son', {
    template: '#son',
    // 子组件使用props选项接收父组件传来的数据，其实接收的数据Vue底层将它合并到data选项中，所以可以直接使用
    // props: ['son_money']
    props: {
      // son_money: Number     // props选项可以进行数据类型验证 不符合验证会给出警告⚠，但页面渲染不受影响
      son_money: {
        validator(value) {    //Vue还提供了validator函数验证，区别是它不仅能验证数据类型，还能验证数据大小
          return value > 3000
        }
      }
    }
  })

  new Vue({
    el: '#app'
  })
</script>

</html>